<script setup lang="ts">
import { timeAgo } from '@/utils'
import commentApi from '@/service/api/comment'

type PropsState = {
  list: any[]
}
withDefaults(defineProps<PropsState>(), {
  list: () => []
})
const emit = defineEmits(['reply'])

const handLove = async (e: any) => {
  await commentApi.like({
    id: e.id,
    type: 2
  })
  if (e.isLike) {
    e.isLike = false
    e.like_count--
  } else {
    e.isPulsing = true
    e.isLike = true
    e.like_count++
  }
}
const handReply = (e: any) => {
  emit('reply', e)
}

const { copy } = useClipboard()
const handShare = async (e: any) => {
  await copy(e.content)
  msgUtil.$message.success('已复制到剪切板')
}
</script>

<template>
  <div class="reply-list" v-for="(el, n) in list" :key="n">
    <div class="reply-card">
      <img class="reply-avatar" :src="el.userInfo.avatar" alt="" />
      <div class="reply-info">
        <template v-if="el.fatherUserInfo">
          <div class="reply-name u-line-1">
            <span class="name">{{ el.userInfo.nickname }}</span>
            <n-popover
              trigger="hover"
              style="
                --n-color: #252632;
                --n-text-color: #fff;
                --n-space: -5px;
                --n-border-radius: 3px 3px 0 0;
                --n-padding: 6px;
              "
            >
              <template #trigger>
                <span class="fatherName" v-if="el.fatherUserInfo">
                  @{{ el.fatherUserInfo.nickname }}
                </span>
              </template>
              <span>{{ el.fatherInfo.content }}</span>
            </n-popover>
          </div>
        </template>
        <template v-else>
          <div class="reply-name u-line-1">
            <span class="name">{{ el.userInfo.nickname }}</span>
          </div>
        </template>
        <div class="reply-content">{{ el.content }}</div>
        <div class="reply-date">
          <span>{{ timeAgo(el.create_at) }}</span>
        </div>
        <div class="reply-tool flex align-center">
          <div class="tool-item" @click="handReply(el)">
            <i class="esayIcon esayIcon-comment"></i>
            <span>回复</span>
          </div>
          <div class="tool-item" @click="handShare(el)">
            <i class="esayIcon esayIcon-fenxiang"></i>
            <span>分享</span>
          </div>
          <div class="tool-item" @click="handLove(el)">
            <template v-if="el.isLike">
              <i
                class="esayIcon esayIcon-aixin1 animate__animated"
                :class="[{ animate__rubberBand: el.isPulsing }]"
              ></i>
            </template>
            <template v-else>
              <i class="esayIcon esayIcon-aixin"></i>
            </template>
            <span>{{ el.like_count }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.reply-list {
  .reply-card {
    display: flex;
    padding: 10px 0;

    .reply-avatar {
      width: 30px;
      height: 30px;
      object-fit: cover;
      border-radius: 50%;
      margin-right: 8px;
    }

    .reply-info {
      flex: 1 0 0;
      width: 0;

      .reply-name {
        font-size: 13px;
        color: rgba(255, 255, 255, 0.95);
        font-weight: 500;
        .fatherName {
          font-size: 11px;
          color: rgba(255, 255, 255, 0.75);
          cursor: pointer;
        }
      }

      .reply-content {
        font-size: 15px;
        color: #fff;
        margin-top: 4px;
      }

      .reply-date {
        font-size: 12px;
        color: rgba(255, 255, 255, 0.6);
        margin-top: 4px;
      }

      .reply-tool {
        margin-top: 8px;
        gap: 12px;

        .tool-item {
          display: flex;
          align-items: center;
          cursor: pointer;
          position: relative;

          i {
            font-size: 16px;
            color: rgba(255, 255, 255, 0.6);
            margin-right: 4px;
          }

          .esayIcon-aixin1 {
            color: #ff0033;
          }

          span {
            font-size: 12px;
            color: rgba(255, 255, 255, 0.6);
          }

          &:hover {
            i {
              color: #fff;
            }

            .esayIcon-aixin1 {
              color: #ff0033;
            }

            span {
              color: #fff;
            }
          }
        }
      }
    }
  }
}
</style>
